<template>
  <div class="main">
    <view class="item">
      <view class="flex justifyBetween alignCenter">
        <view class="bold fz14">您现在在哪个城市？</view>
      </view>
      <view class="desc fz12">优先推荐附近的人。</view>

      <uv-input v-model="formatted_address" border="none" shape="circle" placeholder="当前位置：默认-未知" :customStyle="inputStyle">
        <!-- vue3模式下必须使用v-slot:suffix -->
        <template v-slot:suffix>
          <uv-button text="获取位置" shape="circle" :customStyle="btnStyle" @click="getAddressMap"></uv-button>
        </template>
      </uv-input>

      <!-- #ifdef H5 -->
      <view class="map">
        <image :src="mapImage" mode="widthFix" />
      </view>
      <!-- #endif -->

      <!-- #ifndef H5 -->
      <view class="map">
        <mapCom @regionChange="regionChange" :height="200" :width="mapWidth" :location="position" :markers="markers" showLocation="0"></mapCom>
      </view>
      <!-- #endif -->

      <view class="tip fz12 textCenter">拖动地图来选择您的位置</view>
    </view>

    <view class="next flex justifyFlexEnd">
      <uv-button @click="next" :customStyle="nextBtnStyle" text="下一步" shape="circle" color="linear-gradient(to right, rgba(178, 161, 255, 1), rgba(211, 167, 249, 1))"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import mapCom from "@/components/uv/map.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue", "fatherMethod"]);

const valueDate = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

let mapImage = ref("");
let markers = ref([]);
let btnStyle = ref({
  boxShadow: "0 2px 8px 2px rgba(225, 225, 225, 0.53)",
});
let inputStyle = ref({
  backgroundColor: "#F6F6F6",
  padding: "5px",
});

let nextBtnStyle = ref({
  width: "100px",
  boxShadow: "0 2px 8px 2px rgba(182, 159, 254, 0.53)",
});

let position = ref({});
let mapWidth = ref(0);
let formatted_address = ref(""); //精确定位

onMounted(() => {
  getMapWidth();
});

let getMapWidth = async () => {
  const systemInfo = uni.getSystemInfoSync();
  mapWidth.value = systemInfo.windowWidth - 30;
};

let getLocal = async () => {
  // #ifdef APP-PLUS
  let ret = await counter.permissionFunc("location");
  if (ret) {
    let res = await counter.getPosition();
    getActionAfter(res);
  }
  // #endif

  // #ifndef APP-PLUS
  let resp = await counter.getPosition();
  getActionAfter(resp);
  // #endif
};

let getActionAfter = async (resp) => {
  position.value = resp;
  markers.value = [
    {
      id: 0,
      latitude: resp.latitude,
      longitude: resp.longitude,
      iconPath: "/static/map/iconPath.png",
      width: 20,
      height: 25,
    },
  ];
  mapImage.value = await proxy.$atlas.staticmapImage(
    resp.latitude,
    resp.longitude
  );
  regionChange(resp);
};

let regionChange = (e) => {
  if (!e) return;
  valueDate.value.cityLon = e.longitude;
  valueDate.value.cityLat = e.latitude;
  markers.value = [
    {
      id: 0,
      latitude: e.latitude,
      longitude: e.longitude,
      iconPath: "/static/map/iconPath.png",
      width: 20,
      height: 25,
    },
  ];
  if (e.name) {
    formatted_address.value = e.name;
  } else {
    getAddress();
  }
};

let getAddress = async () => {
  let latitude = markers.value[0].latitude;
  let longitude = markers.value[0].longitude;

  let resp = await proxy.$atlas.getAddressFromCoordinates(latitude, longitude);
  formatted_address.value =
    resp.regeocode.formatted_address || "暂未获取到位置";
};

let getAddressMap = async () => {
  //如果没有获取过权限
  if (
    !counter.slParams.hasOwnProperty("position") ||
    proxy.$utils.isEmptyObject(counter.slParams.position)
  ) {
    getLocal();
  } else {
    let resp = await proxy.$auth.chooseLocation();
    regionChange(resp);
  }
};

let next = () => {
  if (!valueDate.value.cityLon) return proxy.$utils.showToast("请选择您的位置");
  emit("fatherMethod");
};
</script>



<style lang="scss" scoped>
.item {
  text {
    color: #999999;
    font-weight: initial;
  }
  .desc {
    color: #999999;
    padding: 6px 0 20px;
  }
}
.skip {
  color: #009eff;
}
.next {
  margin-right: 10vw;
  margin-top: 10vw;
}
.map {
  margin-top: 21px;
}
.tip {
  margin-top: 20px;
  color: #999999;
}
</style>
